<template>
	<view class="become_delivery">
		<view v-if="list">
			<image class="topImg" :src="list.bg_image.file_path" mode="widthFix"></image>
			<view class="liJiBaoMing">
				<u-button type="error" @click="showFormFun">立即报名</u-button>
			</view>
		</view>
		<view v-else class="stayTunedBox">
			<image class="stayTunedImg" src="@/static/stay-tuned.png" mode="widthFix"></image>
			<view class="stayTunedTxt">敬请期待...</view>
		</view>
		<u-popup v-model="showForm" mode="bottom">
			<view class="form bg-fff">
				<u-form ref="uForm">
					<u-form-item label-width="150rpx" label="您的名字">
						<u-input v-model="form.name" placeholder="请输入名字" />
					</u-form-item>
					<u-form-item label-width="150rpx" label="身份证号">
						<u-input v-model="form.identity_num" placeholder="请输入身份证号" />
					</u-form-item>
					<u-form-item label-width="150rpx" label="手机号">
						<u-input v-model="form.phone" placeholder="请输手机号" />
					</u-form-item>
				</u-form>
				<view style="width: 100%;margin-top: 40rpx;">
					<u-button type="error" @click="send">立即报名</u-button>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showForm: false,
				form: {
					name: '',
					identity_num: '',
					phone: '',
				},
				list:{
					bg_image:{
						file_path:''
					},
					qr_code:{
						file_path:''
					}
				}
			}
		},
		methods: {
			showFormFun() {
				this.showForm = !this.showForm
			},
			validateIDNumber(idNumber) {
				// 身份证号正则表达式
				const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
				return idRegex.test(idNumber);
			},
			validatePhoneNumber(phoneNumber) {
				// 手机号正则表达式
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phoneNumber);
			},
			send() {
				let self = this
				// 进行表单验证
				if (!this.validateIDNumber(this.form.identity_num)) {
					uni.showToast({
						title: '请输入有效的身份证号',
						icon: 'none'
					});
					return;
				}

				if (!this.validatePhoneNumber(this.form.phone)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					});
					return;
				}
				uni.$u.api.submitEmploy(self.form).then(res => {
					console.log(res)
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						mask: true,
						duration: 4000
					});
					setTimeout(()=>{
						uni.navigateBack()
					},3000)
				})
				// uni.$u.api.getAddressDetail({
				// 	address_id: this.form.address_id,
				// }).then(res => {
				// 	if(res.)
				// 	uni.navigateBack()
				// })
				// 如果通过了验证，可以执行发送逻辑
				// 例如：向服务器发送表单数据等
			}

		},
		mounted() {
			uni.$u.api.submitEmployPoster().then(res => {
				console.log(res)
				this.list = res.list
			})
		}
	}
</script>

<style lang="scss">
	.become_delivery {
		// height: 100vh;
		// overflow: hidden;
		background: #f5f5f5;
		.stayTunedBox {
			background-color: #fff;
			text-align: center;
			padding-top: 220rpx;
			.stayTunedImg {
				width: 100rpx;
			}
			.stayTunedTxt {
				padding-top: 40rpx;
			}
		}
		.topImg {
			width: 100%;
			height: 850rpx;

		}

		.liJiBaoMing {
			width: 570rpx;
			margin-left: 100rpx;
			position: fixed;
			bottom: 100rpx;
		}

		.form {
			width: 600rpx;
			// position: absolute;
			padding: 40rpx 32rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			margin-left: 75rpx;
			// top: 990px;

			.form-item {

				.form-item-label {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}

				input {
					height: 96rpx;
					border-radius: 20rpx;
					background: #F6F6F6;
					padding: 0 30rpx;
				}
			}

			.form-item+.form-item {
				margin-top: 20rpx;
			}
		}
	}
</style>